<template>
    <div class="login-wrap">
        <div class="login-box">
            <div style="text-align:center;margin-top:-100px;padding-bottom:20px;">
                <img style="width:200px;height:80px;margin:auto;" src="/static/img/lg-l.png" />
            </div>
            <div class="login-content" >
                <div class="ms-title">渠道系统</div>
                <el-form :model="ruleForm" ref="ruleForm" label-width="0px">
                    <el-form-item prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]" >
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名">
                            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password">
                            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                        </el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button style="width:100%" :loading="loading" type="primary" @click="submitForm('ruleForm')">{{loading?'登录中...':'登录'}}</el-button>
                    </div>
                    <p class="login-tips">Tips : 如果忘记密码请联系管理员</p>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                loading:false,
                ruleForm: {username: '',password: ''}
            }
        },
        methods: {
            submitForm(formName) {
                var that = this;
                this.$refs[formName].validate((valid) => {
                    if (!valid) { return; }
                    that.loading = true;
                    var body = {
                        mobile:that.ruleForm.username,
                        pwd:that.ruleForm.password
                    }
                    that.$http.post('/channel/auth/loginByPwd.json',body).then(data=>{
                        that.loading = false;
                        if(data.data.code != '0'){
                            alert(data.data.msg);
                            return;
                        }
                        console.log(data.data.data);
                        localStorage.setItem('userinfo',JSON.stringify(data.data.data));
                        that.$router.push('/');
                    }).catch(error=>{
                        that.$message.error('请求出错');
                        that.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>
    .login-wrap{
        width: 100%;
        height: 100%;
        position: relative;
        background: #F2F6FC;

    }
    .login-box{ 
        position: absolute;
        top:0;left:0;bottom: 0;right: 0;
        margin: auto;
        width:90%;
        height:250px;
    }
    .login-content{
        width: 100%;
        height: 100%;
        background: #fff;
        padding: 0 20px 20px 20px;
        border-radius: 10px;
    }
    .ms-title{width: 100%;text-align: center;font-weight: 500;color: #000;padding: 20px;}
    .login-tips{width: 100%;font-size: 12px;color: #909399;margin-top: 10px;}
</style>
